<template>
<el-col :span="12">
    <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose">
    <el-submenu index="1">
        <template slot="title">
        <i class="el-icon-menu"></i>
        <span>工作台</span>
        </template>
        <el-menu-item-group>
        <el-menu-item index="1-1">工作台</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3818.svg" alt="">
        <span>资料管理</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">小区信息</el-menu-item>
            <el-menu-item index="1-2">楼座管理</el-menu-item>
            <el-menu-item index="1-3">房屋管理</el-menu-item>
            <el-menu-item index="1-4">储物室管理</el-menu-item>
            <el-menu-item index="1-5">住户管理</el-menu-item>
            <el-menu-item index="1-6">房屋租赁管理</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3833.svg" alt="">
        <span>车行管理</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">区域管理</el-menu-item>
            <el-menu-item index="1-2">车位管理</el-menu-item>
            <el-menu-item index="1-3">车辆管理</el-menu-item>
            <el-menu-item index="1-4">月卡管理</el-menu-item>
            <el-menu-item index="1-5">停车缴费管理</el-menu-item>
        </el-menu-item-group>
        
    </el-submenu>
    <el-submenu index="4">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3847.svg" alt="">
        <span>物业服务</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">报修管理</el-menu-item>
            <el-menu-item index="1-2">访客管理</el-menu-item>
            <el-menu-item index="1-3">投诉管理</el-menu-item>
            <el-menu-item index="1-4">活动管理</el-menu-item>
            <el-menu-item index="1-5">公告管理</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="5">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3861.svg" alt="">
        <span>缴费管理</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">账单管理</el-menu-item>
            <el-menu-item index="1-2">收费项目管理</el-menu-item>
            <el-menu-item index="1-3">抄表周期管理</el-menu-item>
            <el-menu-item index="1-4">仪表管理</el-menu-item>
        </el-menu-item-group>
        
    </el-submenu>
    <el-submenu index="6">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3903.svg" alt="">
        <span>巡检巡更</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">巡更记录</el-menu-item>
            <el-menu-item index="1-2">巡更任务管理</el-menu-item>
            <el-menu-item index="1-3">巡更计划管理</el-menu-item>
            <el-menu-item index="1-4">巡更点管理</el-menu-item>
            <el-menu-item index="1-5">巡更路线管理</el-menu-item>
            <el-menu-item index="1-6">巡更项目管理</el-menu-item>
            <el-menu-item index="1-7">巡更数据概况</el-menu-item>
            <el-menu-item index="1-8">巡更日报</el-menu-item>
            <el-menu-item index="1-9">巡更周报</el-menu-item>
            <el-menu-item index="1-10">巡更月报</el-menu-item>
            <el-menu-item index="1-11">巡更业务统计</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="7">
        <template slot="title">
        <img class="icon" src="https://cdn7.axureshop.com/demo2024/2033334/images/演示框架/u3874.svg" alt="">
        <span>设备管理</span>
        </template>
            <el-menu-item-group>
            <el-menu-item index="1-1">公共设备管理</el-menu-item>
            <el-menu-item index="1-2">设备分类管理</el-menu-item>
            <el-menu-item index="1-3">设备维修记录</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    <el-submenu index="8">
        <template slot="title">
        <i class="el-icon-setting"></i>
        <span>设置</span>
        </template>
        <el-menu-item-group>
            <el-menu-item index="1-1">住户标签</el-menu-item>
            <el-menu-item index="1-2">投诉类型</el-menu-item>
            <el-menu-item index="1-3">房屋设施管理</el-menu-item>
            <el-menu-item index="1-4">Banner图管理</el-menu-item>
            <el-menu-item index="1-5">员工管理</el-menu-item>
            <el-menu-item index="1-6">角色管理</el-menu-item>
            <el-menu-item index="1-7">消息通知</el-menu-item>
            <el-menu-item index="1-8">操作日志</el-menu-item>
            <el-menu-item index="1-9">个人信息</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
    </el-menu>
</el-col>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    }
}
</script>

<style>

</style>